<template>
  <div class="dialog">
    <el-dialog
      title="完成批次"
      :visible.sync="showDialog"
      width="45%"
      top="0"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <el-form
        ref="ruleForm"
        label-position="left"
        label-width="120px"
        :model="formData"
        :rules="rules"
        class="el-form"
      >
        <el-row :span="24">
          <el-col :span="12">
            <el-form-item
              style="width: 100%"
              label="完成开始时间："
              prop="completeStartTime"
              class="w50p"
            >
              <el-date-picker
                v-model="formData.completeStartTime"
                :picker-options="beginDate()"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              style="width: 100%"
              label="完成结束时间："
              prop="completeEndTime"
              class="w50p"
            >
              <el-date-picker
                v-model="formData.completeEndTime"
                :picker-options="processDate()"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" style="width: 50%; display: flex;">
            <el-form-item style="width: 70%" label="实际加工量：" prop="output">
              <el-input v-model="formData.output" placeholder="请输入实际加工量" />
            </el-form-item>
            <el-form-item style="width: 30%" prop="outputUnitNo">
              <el-select
                v-model="formData.outputUnitNo"
                placeholder="单位"
                @change="getUnitName"
              >
                <el-option
                  v-for="item in unitList"
                  :key="item.unitNo"
                  :label="item.unitName"
                  :value="item.unitNo"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
        <el-button type="primary" class="savebtn" @click="save('ruleForm')">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Addeditdialog",
  components: {},
  props: {
    completeBatch: {
      type: Object,
      default: () => {}
    },
    unitList: {
      type: Array,
      default: () => []
    },
    // 弹框名称
    titleText: {
      type: String,
      default: ""
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showDialog: this.show,
      // 展示
      formData: {},
      devs: ["测试1", "测试2"],
      rules: {
        completeStartTime: [
          {
            required: true,
            message: "请选择完成开始时间",
            trigger: ["blur"]
          }
        ],
        completeEndTime: [
          {
            required: true,
            message: "请选择完成结束时间",
            trigger: ["blur"]
          }
        ],
        outputUnitNo: [
          {
            required: true,
            message: "请选择单位",
            trigger: "blur"
          }
        ],
        output: [
          {
            required: true,
            message: "请输入实际加工量",
            trigger: ["blur"]
          },
          {
            pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/,
            message: "值需为不小于0的数",
            trigger: ["blur", "change"]
          }
        ]
      }
    };
  },
  watch: {
    completeBatch(v) {
      this.$set(this.formData, "completeStartTime", v.startTime || "");
      this.$set(this.formData, "completeEndTime", v.endTime || "");
      this.$set(this.formData, "output", v.estimatedProcessingQuantity || "");
      this.$set(
        this.formData,
        "outputUnitNo",
        v.estimatedProcessingUnitNo || ""
      );
      this.$set(
        this.formData,
        "outputUnitName",
        v.estimatedProcessingUnitName || ""
      );
    },
    show(v) {
      this.showDialog = v;
      this.$refs.ruleForm.clearValidate();
    }
  },
  created() {},
  mounted() {},
  methods: {
    getUnitName(e) {
      this.unitList.forEach(item => {
        if (item.unitNo === e) {
          this.formData.outputUnitName = item.unitName;
        }
      });
    },
    // 限制前面日期不能低于后面日期
    beginDate() {
      const self = this;
      return {
        disabledDate(time) {
          if (self.formData.completeEndTime) {
            //  如果结束时间不为空，则小于结束时间
            return (
              new Date(self.formData.completeEndTime).getTime() < time.getTime()
            );
          } else {
            // return time.getTime() > Date.now(); // 开始时间不选时，结束时间最大值小于等于当天
          }
        }
      };
    },
    processDate() {
      const self = this;
      return {
        disabledDate(time) {
          if (self.formData.completeStartTime) {
            //  如果开始时间不为空，则结束时间大于开始时间
            self.time = new Date();
            return (
              new Date(self.formData.completeStartTime).getTime() -
                24 * 60 * 60 * 1000 >
              time.getTime()
            );
          } else {
            // return time.getTime() > Date.now(); // 开始时间不选时，结束时间最大值小于等于当天
          }
        }
      };
    },
    add() {
      this.devs.push("测试3");
    },
    save(formData) {
      this.$refs[formData].validate(valid => {
        if (valid) {
          this.$emit("addEvent", { ...this.formData });
        }
      });
    },
    close() {
      this.$emit("closeDialog");
      this.$refs.ruleForm.clearValidate();
    },
    cancel() {
      this.$emit("closeDialog");
      this.formData = {};
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__content {
  margin-left: 0 !important;
}
</style>
